<template>
  <div class="good-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <ul>
      <transition-group name="list" tag="div">
      <li v-for="(good, index) in goods" :key="index">
        <spliter></spliter>
        <good
          v-bind="good"></good>
      </li>
      </transition-group>

      <li class="loading">
        <mt-spinner v-if="!allLoaded" type="snake" color="#8fd0fd"></mt-spinner>
        <p v-else-if="allLoaded">没有更多内容了~</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import good from 'components/good'
  import spliter from 'components/common/spliter'
  import { Spinner } from 'mint-ui'

  export default {
    props: {
      borrowProductType: {
        type: String,
        default: '6'
      }
    },
    data () {
      return {
        goods: [],
        height: 0,
        currentPage: 1,
        totalPage: null,
        loading: false,
        allLoaded: false
      }
    },
    methods: {
      loadMore () {
        this.loading = true
        console.log(this.currentPage, this.totalPage)
        if (this.currentPage === this.totalPage || this.currentPage - 1 === this.totalPage) {
          this.allLoaded = true
          return
        }
        this.$http.get(`/api/borrow/borrowInfo/list?currentPage=${this.currentPage}&pageSize=10&borrowProductType=${this.borrowProductType}`)
          .then((res) => {
            if (res.data.success) {
              res.data.data.list.forEach((good) => {
                this.goods.push(good)
              })
              if (this.totalPage === null) {
                this.totalPage = res.data.data.totalPage
              }
              this.loading = false
            }
          })
        this.currentPage += 1
      }
    },
    components: {
      good,
      spliter,
      mtSpinner: Spinner
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .good-list {
    width: 100%;
    ul {
      width: 100%;
      overflow: auto;
      -webkit-overflow-scrolling : touch;
      .list-enter {
        opacity: 0;
        transform: translate3d(100px, 0, 0)
      }
      .list-enter-to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
      .list-enter-active {
        transition: all .5s ease;
      }
    }
    .loading {
      display: flex;
      justify-content: center;
      padding: 43px 0;
      text-align: center;
      background: $base-f8f8f8;
      color: $base-e5e5e5;
      p {
        font-size: 30px;
      }
    }
  }
</style>
